<!-- 详情顶部公共组件 -->
<template>
  <div class='detail_title'>
    <div class="target-msg flex">
      <i class="iconfont target-img icon-icon_list1">&#xe61f;</i>
      <div class="target-content flex flex-horizontal-between">
        <ul class="flex flex-wrap flex-horizontal-between">
          <li v-for="(item,index) in msgList" :key="index"
            :class="['flex','flex-vertical-center',{'width-100':item.key=='buildingName'}]">
            <p>{{item.name}}:</p>
            <p>{{headerInfo[item.key]}}</p>
          </li>
        </ul>
        <div class="target-status flex flex-vertical-center">
          <p>{{headerInfo.auditStatusCN}}</p>
          <Button type="primary" style="margin-left:20px" @click="examineFun"
            v-if="examineBtnFlag">审核</Button>
        </div>
      </div>
      <Modal v-model="examineFlag" title="请进行审核" footer-hide>
        <div>
          <Form ref="examineForm" :model="examineForm" :label-width="100"
            :rules="examineValidate" label-position="left">
            <FormItem label="审核结果：" prop="auditResult">
              <Select v-model="examineForm.auditResult">
                <Option value="pass">通过</Option>
                <Option value="reject">不通过</Option>
              </Select>
            </FormItem>
            <FormItem label="驳回原因：" prop="rejectReason"
              v-if="examineForm.auditResult=='reject'">
              <Input v-model="examineForm.rejectReason" maxlength="300" show-word-limit
                type="textarea" placeholder="请输入驳回原因"></Input>
            </FormItem>
            <FormItem class="flex flex-horizontal-end">
              <Button @click="cancelExamine" style="margin-right:20px">取消</Button>
              <Button type="primary" :loading="loading" @click="submitExamine">确定</Button>
            </FormItem>
          </Form>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
  import examineApi from '@/biz/synthetic/examineFitClass'
  export default {
    props: {
      isWeek: {
        type: Boolean,
        default: false,
      },
      headerInfo: {
        type: Object,
        default: {},
      },
      examineBtnFlag: {
        type: Boolean, // 是否展示审核按钮
        default: false,
      },
    },
    data() {
      return {
        examineFlag: false,
        examineForm: {
          auditResult: '', //审核结果
          rejectReason: '', // 原因
          periodId: '',
        },
        examineValidate: {
          auditResult: [
            { required: true, message: '审核结果不能为空', trigger: 'change' },
          ],
          rejectReason: [
            { required: true, message: '驳回原因不能为空', trigger: 'change' },
          ],
        },
        msgList: [
        {
          name: '案场名称',
          key: 'buildingName',
        },
        {
          name: '合作模式',
          key: 'cooperateType',
        },
        {
          name: '一批次开盘人数',
          key: 'openPeople',
        },
        {
          name: '执行周期',
          key: 'rangePeriod',
        },
        {
          name: '创建日期',
          key: 'createDate',
        }, ],
        monthDesc: '',
        loading: false
      }
    },
    computed: {},
    watch: {},
    methods: {
      examineFun() {
        this.examineFlag = true
      },
      submitExamine() {
        this.$refs.examineForm.validate((valid) => {
          if (valid) {
            this.loading = true
            console.log(this.examineForm, 'formValidateAdd')
            let params = { ...this.examineForm }
            // 总管 业务总 城市总 审核
            switch (this.auditStep) {
              case 'weekAudit':
                params.monthDesc = this.headerInfo.rangePeriod
                params.periodId = this.$dt.memory.get('weekTarget_params').periodId
                examineApi.weekAudithandle(params).then((res) => {
                  this.loading = false
                  this.examineFlag = false
                  this.$emit('close')
                }).catch(() => {
                  this.loading = false
                })
                break
              case 'company':
                params.periodId = this.$dt.memory.get('target_params').periodId
                examineApi.auditByZG(params).then((res) => {
                  this.loading = false
                  this.examineFlag = false
                  this.$emit('close')
                }).catch(() => {
                  this.loading = false
                })
                break
              case 'business':
                params.periodId = this.$dt.memory.get('target_params').periodId
                examineApi.auditByYWZ(params).then((res) => {
                  this.loading = false
                  this.examineFlag = false
                  this.$emit('close')
                }).catch(() => {
                  this.loading = false
                })
                break
              case 'city':
                params.periodId = this.$dt.memory.get('target_params').periodId
                examineApi.auditByCSZ(params).then((res) => {
                  this.loading = false
                  this.examineFlag = false
                  this.$emit('close')
                }).catch(() => {
                  this.loading = false
                })
                break
              default:
                break
            }
          }
        })
      },
      cancelExamine() {
        this.examineFlag = false
      },
    },
    created() {
      if (this.isWeek) {
        this.msgList.splice(1, 2)
        this.auditStep = this.$dt.memory.get('weekTarget_params') ? this.$dt.memory.get(
          'weekTarget_params').auditStep : ''
      } else {
        this.auditStep = this.$dt.memory.get('target_params') ? this.$dt.memory.get(
          'target_params').auditStep : ''
      }
    },
    mounted() {},
  }
</script>
<style lang='scss' scoped>
  .detail_title {
    .target-msg {
      padding: 10px 40px;
      width: 100%;
      background-color: #f2f2f2;

      .target-content {
        height: 100px;
        width: 100%;
        background-color: #f2f2f2;
        font-size: 18px;
      }

      .target-img {
        margin: 9px 0;
        width: 30px;
        height: 30px;
        color: #0f42a7;
        font-size: 24px;
      }

      .target-status {
        padding-left: 3%;
        width: 20%;
        border-left: 1px solid #d7d7d7;
        font-size: 24px;
      }
    }
  }
</style>